<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width: 80%;">
        <div style="margin-bottom: 10px; display: flex;">
            <el-button type="success" style="width: 100px;margin-right: 10px;" @click="exportTemplate">导出摸板</el-button>
            <el-upload class="upload-demo" :on-change="handleChange" :auto-upload="false" style="width: 200px;"
                ref="upload">
                <el-button type="primary" style="width: 200px;">选择资产文件导入预览</el-button>
                <template #tip>
                    <div class="el-upload__tip"> </div>
                </template>
            </el-upload>
        </div>

        <el-table size="small" :data="list" style="width: 100%;margin-bottom: 10px;"
            :row-class-name="tableRowClassName">
            <el-table-column type="index" width="50" label="序号" />
            <el-table-column prop="name" label="资产名称">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.name" @blur="inputBlur(scope, scope.row.name)" />
                </template>
            </el-table-column>
            <!-- <el-table-column prop="code" label="资产编号">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.code" @blur="inputBlur(scope, scope.row.code)" />
                </template>
            </el-table-column>
            <el-table-column prop="oldCode" label="财政资产编号">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.oldCode" @blur="inputBlur(scope, scope.row.oldCode)" />
                </template>
            </el-table-column> -->
            <!-- <el-table-column prop="category" label="分类名称">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.category" @blur="inputBlur(scope, scope.row.category)" />
                </template>
            </el-table-column>
            <el-table-column prop="categoryCode" label="分类号">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.categoryCode" @blur="inputBlur(scope, scope.row.categoryCode)" />
                </template>
            </el-table-column>
            <el-table-column prop="standards" label="计量单位">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.standards" @blur="inputBlur(scope, scope.row.standards)" />
                </template>
            </el-table-column> -->
            <el-table-column prop="model" label="型号">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.model" @focus="inputFocus(scope.row.model)"
                        @blur="inputBlur(scope, scope.row.model)" />
                </template>
            </el-table-column>
            <el-table-column prop="price" label="单价">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.price" @blur="inputBlur(scope, scope.row.price)" />
                </template>
            </el-table-column>
            <el-table-column prop="amount" label="数量">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.amount" @blur="inputBlur(scope, scope.row.amount)" />
                </template>
            </el-table-column>
            <el-table-column prop="money" label="金额">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.money" @blur="inputBlur(scope, scope.row.money)" />
                </template>
            </el-table-column>
            <el-table-column prop="department" label="使用部门">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.department" @blur="inputBlur(scope, scope.row.department)" />
                </template>
            </el-table-column>
            <el-table-column prop="managerDepartment" label="管理部门">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.managerDepartment"
                        @blur="inputBlur(scope, scope.row.managerDepartment)" />
                </template>
            </el-table-column>
            <el-table-column prop="manager" label="管理人">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.manager" @blur="inputBlur(scope, scope.row.manager)" />
                </template>
            </el-table-column>
            <el-table-column prop="place" label="存放地点">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.place" @blur="inputBlur(scope, scope.row.place)" />
                </template>
            </el-table-column>
            <!-- <el-table-column prop="place" label="楼宇">
                <template style="display: block" #default="scope">
                    <el-input v-model="scope.row.building" @blur="inputBlur(scope, scope.row.building)" />
                </template>
            </el-table-column> -->
            <el-table-column prop="place" label="操作">
                <template style="display: block" #default="scope">
                    <el-button class="del_btn" size="small" type="danger" @click="deleteAssets(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>

            <template v-slot:empty>
                <el-empty description="暂无数据"></el-empty>
            </template>
        </el-table>
        <el-config-provider :locale="locale">
            <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                v-model:current-page="size" v-model:page-size="pageSize" @current-change="changeCurrentPage">
            </el-pagination>
        </el-config-provider>
        <template #footer>
            <span class="dialog-footer" v-if="title == '添加资产' || title == '批量添加资产'">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
            <span class="dialog-footer" v-if="title == '修改资产'">
                <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessageBox, ElMessage, ElForm, ElLoading } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddFaAssets",
    components: { ElForm, ElMessage, ElMessageBox },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            rowIndex: '',
            columnIndex: '',
            parentId: '',
            excelAccept: '.xls,.xlsx',
            page: 1,
            pageSize: 10,
            total: 0,
            limit: 10,
            list: [],
            addFlag: false,
            inputValue: '',
            editId: '',
        };
    },
    mounted() {
        console.log(this.list);
        // this.getads()
    },
    methods: {
        getads(id) {
            httpService("/javaApi/faList/queryById", { id: this.editId }, "get").then(

                (data) => {
                    console.log(data);
                    if (this.list.length == 0) {
                        this.list.push(data)
                    } else {
                        this.list = []
                        this.list.push(data)
                    }
                }
            );
        },
        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.importPreview()
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.importPreview()
        },
        closeDialog() {
            // this.list = []
            this.clear()
        },
        cancel() {
            this.dialogFormVisible = false;
            // this.list = []
            this.clear()
        },
        inputFocus(str) {
            // alert(1)
            // this.inputValue = str
            // console.log(this.inputValue, str);
        },
        inputBlur(data, str) {
            console.log(str);
            if (str == null || str == '') {
                return
            }

            let params = new FormData()
            params.append('id', data.row.id)
            params.append(data.column.property, str)
            httpService("/javaApi/faList/edit", params, "post").then(
                // httpService("/javaApi/faList/edit", params, "post").then(
                (data) => {
                    if (data.code == 200) {
                        ElMessage.success("修改成功");
                        if (this.title == "修改资产") {
                            this.getads()
                        } else {
                            this.importPreview()
                        }
                    } else {
                        ElMessage.error("修改失败");
                    }
                }
            );
        },
        handleChange(e) {
            var loadingInstance = ElLoading.service({
                lock: true, text: '加载中', background: 'rgba(0, 0, 0, 0.7)',
            });
            let file = e.raw
            let params = new FormData()
            params.append('file', file)
            params.append('parentId', this.parentId)
            httpService("/javaApi/faSubList/importExcel", params, "post").then(
                (data) => {
                    loadingInstance.close()
                    if (data.code == 200) {
                        ElMessage.success("导入成功");
                        this.importPreview()
                    } else {
                        ElMessage.error("导入失败");
                    }
                }
            );
        },
        exportTemplate() {
            httpService("/javaApi/faSubList/exportTemplate", {
                // parentId: 0
            }, "get").then(
                (data) => {
                    if (data.code == 200) {
                        window.open("https://wx.zhengzhong.cn" + data.message, '_blank')
                        // window.open("http://192.168.9.20" + data.message, '_blank')
                        // window.open(data.message, '_blank')
                        // window.location.href = data.message
                    }
                }
            );
        },
        importPreview() {
            httpService("/javaApi/faList/listYuLan/" + this.page + "/" + this.pageSize, {
                'parentId': this.parentId,
            }, "get").then(
                (data) => {
                    this.list = data.list;
                    this.total = data.total
                    console.log(this.list);
                }
            );
        },

        deleteAssets(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/faList/deleteById", "id=" + id, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.importPreview()
                            } else {
                                ElMessage.error("删除失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },
        clear() {
            this.dialogFormVisible = false;
            this.$refs.upload.clearFiles();
            this.list = []
            this.editId = ""
        },
        save() {
            if (this.title == "修改资产") {
                this.clear()
                // let params = new FormData()
                // if (this.parentId == '') {
                //     params.append('isEffect', 0)
                // } else {
                //     params.append('id', this.parentId)
                //     params.append('isEffect', 1)
                // }
                // httpService("/javaApi/faProject/addEdit", params, "post").then(
                //     (data) => {
                //         console.log(data);
                //         // this.addFaProjectForm = data;
                //         if (data.code == 200) {
                //             ElMessage.success(data.object);
                //             this.dialogFormVisible = false
                //             this.list = [];
                //             //刷新父组件的数据
                //             this.editId()
                //             // this.$parent.getFaProjectList();
                //         } else {
                //             ElMessage.error(data.object);
                //         }
                //     }
                // );
            } else {
                let params = new FormData()
                if (this.parentId == '') {
                    params.append('isEffect', 0)
                } else {
                    params.append('id', this.parentId)
                    params.append('isEffect', 1)
                }
                httpService("/javaApi/faProject/addEdit", params, "post").then(
                    (data) => {
                        console.log(data);
                        // this.addFaProjectForm = data;
                        if (data.code == 200) {
                            ElMessage.success(data.object);
                            this.dialogFormVisible = false
                            this.list = [];
                            //刷新父组件的数据
                            this.$parent.getFaProjectList();
                        } else {
                            ElMessage.error(data.object);
                        }
                    }
                );

            }
        },
    },
};
</script>
<style>
.el-dialog {
    width: 80%;
}

.selest_11 {
    width: 190px;
}

.el-upload button {
    width: 190px;
}

.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 15px;
}
</style>